import React from 'react';
import { Button } from 'antd';
import { WeaDialog, WeaLocaleProvider, WeaProgress } from 'ecCom';
import { observer } from 'mobx-react';
const getLabel = WeaLocaleProvider.getLabel;
import "./index.less";
@observer
export default class CopyAppDialog extends React.Component {
    render() {
        const { store } = this.props;
        const { visible, form, onSave, onCancel, submiting, progress } = store.copyAppDialog;
        const height = (submiting || progress === 100) ? 140 : 100
        const buttons = [
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gch8z0@save`} type='primary' icon={submiting && 'loading'} disabled={submiting} onClick={onSave}>{getLabel('826', '确定')}</Button>,
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2r8ie5@close`} type='ghost' onClick={onCancel} >{getLabel(309, '关闭')}</Button>
        ];
        const getLabelString  = getLabel('512782', '已完成')
        if (progress === 100) buttons[0] = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wjvnxe`} type='primary' onClick={this.showDesigner} >{getLabel('383278', '设计')}</Button>
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@3uyvzq`}
                title={getLabel('528574','另存为') }
                icon={"icon-coms02-Data-center"}
                iconBgcolor="#1a57a0"
                style={{ height, width: 420 }}
                visible={visible}
                buttons={buttons}
                onCancel={onCancel}
            >
                {form.render({ needTigger: false, col: 1 })}
                {(submiting || progress === 100) && <div style={{ paddingLeft: '55px' }}>
                    <div style={{ lineHeight: '30px', color: '#333' }}>{getLabel('514574', '当前进度:')}
                        {progress === 100 && <span style={{ marginLeft: '50px', color: 'green' }}>{getLabelString}</span>}
                    </div>
                    <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@9wxi5g`} percent={progress} strokeColor="#0094FF" />
                </div>}
            </WeaDialog>
        )
    }

    showDesigner = () => {
        const { store } = this.props;
        store.copyAppDialogVisible = false;
        store.showDesigner({id:store.copyAppId})
    }

}